<template>
<div>
  <el-table :data="flag"  style="width: 100%" height="400" >
    <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
    <el-table-column prop="subject" label="学科" width="120"></el-table-column>
    <el-table-column  prop="catalog" label="目录"  width="120">  </el-table-column>
    <el-table-column prop="questionType" label="题型"  :formatter="formatType"  width="120"> </el-table-column>
    <el-table-column prop="question" label="题干" width="280"  >
      <template v-slot="{row}">
        <span v-html="row.question"></span>
      </template>
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间" width="180">
      <template v-slot="{row}">
      {{row.addDate|formatDate("yyyy-MM-dd hh:mm:ss") }}
      </template>
    </el-table-column>
    <el-table-column prop="difficulty" label="难度" :formatter="formatDifficult" width="80"></el-table-column>
    <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
    <el-table-column prop="chkState" label="审核状态" :formatter="formatStatus" width="120"></el-table-column>
    <el-table-column prop="chkRemarks" label="审核意见" width="150"></el-table-column>
    <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
    <el-table-column prop="publishState" label="发布状态" :formatter="formatstate"  width="150"></el-table-column>
     <el-table-column  fixed="right"  label="操作" width="220" class="operate" align="center">
       <template v-slot="{row}">
        <el-link type="primary" @click="preview(row.id)">预览</el-link>
        <el-link type="primary" @click="checkModule(row.id)" :disabled="row.chkState !== 0">审核</el-link>
        <el-link type="primary"  @click="$router.push(`new?id=${row.id}`)" :disabled="row.publishState=== 2">修改</el-link>
        <el-link type="primary" @click="putShelf(row)">
          {{row.publishState===2?'下架':'上架'}}
          </el-link>
        <!-- 如果当前的状态是0 表示已下架  下架的话显示按钮就是上架-->
        <el-link type="primary" @click="delData(row.id)"  :disabled="row.publishState=== 2">删除</el-link>
        </template>
     </el-table-column>
  </el-table>
  <!-- 预览模块-->
        <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="btnCancel">
           <!-- 预览页面内容 -->
              <el-row  type="flex" >
               <el-col>
                  <span v-if="list.questionType==='1'">【题型】:单选</span>
                  <span v-else-if="list.questionType==='2'">【题型】:多选</span>
                  <span v-else>【题型】:简答</span>
               </el-col>
               <el-col>【编号】：{{list.id}}</el-col>
               <el-col>
                  <span v-if="list.difficulty==='1'">【难度】:简单</span>
                  <span v-else-if="list.difficulty==='2'">【难度】:一般</span>
                  <span v-else>【难度】:困难</span>
               </el-col>
               <el-col>【标签】：{{list.tags}}</el-col>
              </el-row>
              <el-row  type="flex"  class="row-two">
               <el-col :span="6">【学科】:{{list.subject}}</el-col>
               <el-col  :span="6">【目录】：{{list.catalog}}</el-col>
               <el-col  :span="6">【方向】：{{list.direction}}</el-col>
              </el-row>
              <el-row class="line">【题干】：
                <el-row style="margin:15px">
                  <span v-html="list.question" style="color:blue"></span>
                </el-row>
              </el-row>
              <el-row class="line">【参考答案】：
                <el-button type="danger" size="mini" @click="clickVideo">视频答案预览</el-button>
                  <video :src="list.videoURL" id="video" style="display:none" controls autoplay></video>
                </el-row>
              <el-row class="line">
                <span>【答案解析】：</span>
                <span v-html="list.answer"></span>
              </el-row>
              <el-row style="padding-top:10px">【题目备注】：{{list.remarks}}</el-row>
              <span slot="footer" class="dialog-footer"  style="margin-left:740px" >
                 <el-button type="primary" @click="btnCancel">关 闭</el-button>
              </span>
      </el-dialog>
  <!-- 审核模块 -->
            <el-dialog
              title="题目审核"
              :visible.sync="checkVisible"
              width="25%"
              :before-close="checkCancel">
                <el-row>
                 <el-radio v-model="radio" label="1">通过</el-radio>
                 <el-radio v-model="radio" label="2">拒绝</el-radio>
                </el-row>
                <el-row style="margin-top:25px">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入审核意见"
                  v-model="textarea">
                </el-input>
                </el-row>
              <span slot="footer" class="dialog-footer" style="margin-left:110px">
              <el-button @click="checkCancel">取 消</el-button>
              <el-button type="primary" @click="checkOK">确 定</el-button>
             </span>
        </el-dialog>
<!-- 分页 -->
   <div align="right" style="margin-top:15px">
      <el-pagination
     background
      @size-change="changeSize"
      @current-change="changePage"
      :current-page="page.page"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.counts"
      >
    </el-pagination>
   </div>
</div>

</template>

<script>
import { choice, remove as baseRemove, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'
import QuestionEnum from '@/api/hmmm/questionType.js' // 引入枚举对象
import difficultEnum from '@/api/hmmm/difficult.js' // 引入枚举对象
import checkStatus from '@/api/hmmm/checkStatus.js'
export default {
  props: {
    flag: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      dialogVisible: false, // 预览模块
      checkVisible: false, // 审核模块
      textarea: '', // 文本域
      radio: '1', // 通过拒绝单选框
      code: '',
      // tableData: [{
      //   number: '',
      //   subject: '',
      //   catalog: '',
      //   questionType: '',
      //   question: '',
      //   addDate: '',
      //   difficulty: '',
      //   creator: '',
      //   chkState: '',
      //   chkUser: '',
      //   chkRemarks: ''
      // }],
      QuestionEnum, // 枚举对象--题型
      difficultEnum, // 难度
      checkStatus,
      res: [],
      list: [], // 承接数组
      page: {
        page: 1, // 当前页
        pagesize: 5, // 每页条数
        counts: 0 // 记录总数
      }
    }
  },
  methods: {
    // // 获取精选题库列表
    async getChoiceList () {
      const res = await choice(this.page)
      this.page.counts = res.data.counts // 数据总条数
    },

    // 页码改变时触发
    changePage (newPage) {
      // newPage当前点击的页码
      this.page.page = newPage // 将当前页码赋值给最新页码
      this.$emit('updateList', this.page)
    },
    // pageSize 改变时会触发
    changeSize (size) {
      this.page.pagesize = size
      this.$emit('updateList', this.page)
    },
    // 格式化题型
    formatType (row, column, cellValue, index) {
      const obj = this.QuestionEnum.questionType.find(item => item.id === cellValue)
      return obj ? obj.value : ''
    },
    // 格式化难易程度
    formatDifficult (row, column, cellValue, index) {
      const obj = this.difficultEnum.difficults.find(item => item.id === cellValue)
      return obj ? obj.value : ''
    },
    // 格式化审核状态
    formatStatus (row, column, cellValue, index) {
      const obj = this.checkStatus.chkType.find(item => item.value === cellValue)
      return obj ? obj.label : ''
    },
    // 格式化发布状态
    formatstate (row, column, cellValue, index) {
      const obj = this.checkStatus.publishType.find(item => item.value === cellValue)
      return obj ? obj.label : ''
    },
    // 删除题库数据
    delData (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await baseRemove({ id: id })
        this.$message.success('删除成功')
        // 删除之后重新铺设页面数据
        this.getChoice()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 上架
    putShelf (row) {
      this.$confirm(`您确认${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        row.publishState = row.publishState === 0 ? 2 : 0
        await choicePublish(row)
        this.$message.success(`${row.publishState === 0 ? '下架' : '上架'}成功`)
        this.getChoice()
      }).catch((error) => {
        console.log(error)
      })
    },
    // 预览---点击预览 打开弹窗
    async preview (id) {
      this.dialogVisible = true
      const { data } = await choice()
      this.list = data.items
      this.list.filter(item => {
        if (item.id === id) {
          this.list = item
        }
      })
    },
    // 点击视频答案解析按钮  显示解析视频
    clickVideo () {
      document.getElementById('video').style.display = 'block'
    },
    // 预览框点击取消和×时触发
    btnCancel () {
      this.dialogVisible = false
      document.getElementById('video').style.display = 'none'
    },
    // 审核模块
    checkModule (id) {
      // console.log(id)
      this.code = id
      this.checkVisible = true
    },
    // 点击审核模块中的取消
    checkCancel () {
      this.checkVisible = false
    },
    // 点击审核模块的确定
    async checkOK () {
      if (this.textarea.length === 0) {
        return this.$message.warning('请输入审核意见')
      }
      // 调用接口
      await choiceCheck({
        id: this.code, // 点击审核获取的id
        chkState: +this.radio,
        chkRemarks: this.textarea
      })
      this.checkVisible = false
      this.$message.success('审核成功')
      this.radio = '1' // 单选框默认选中通过
      // 传到父组件中审核完毕之后立即更新精选题库中的数据
      this.$emit('allCheck', {
        id: this.code, // 点击审核获取的id
        chkState: +this.radio,
        chkRemarks: this.textarea
      })
    }
  },
  created () {
    this.getChoiceList()
  }
}
</script>

<style scoped>

.el-link{
margin:5px;
}
.row-two{
  margin-top:15px;
  padding-bottom: 13px;
  border-bottom: 1px solid #000;
}
.line{
  padding: 15px 0;
  border-bottom: 1px solid #000;
}
</style>
